﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var index=1;
            var $lis=$("li");
            $(".adver").mouseover(function () {
                $(".arrowLeft").show();
                $(".arrowRight").show();

            });
            $(".adver").mouseout(function () {
                $(".arrowLeft").hide();
                $(".arrowRight").hide();

            });
            $(".arrowRight").click(function () {
                if (index==6){
                    alert("已经是最后一张了！")
                }else{
                    index=index+1;
                    $("li:nth-of-type("+index+")").css("background","orange");
                    $("li:nth-of-type("+index+")").siblings().css("background","#333333");
                    $(".adver").css("background","url('images/adver0"+index+".jpg')");
                }
            });
            $(".arrowLeft").click(function () {
                if (index==1){
                    alert("已经是第一张了！")
                }else{
                    index=index+1;
                    $("li:nth-of-type("+index+")").css("background","orange");
                    $("li:nth-of-type("+index+")").siblings().css("background","#333333");
                    $(".adver").css("background","url('images/adver0"+index+".jpg')");
                }
            });
        });
    </script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>